.archives-wrap {
  margin: 50px 0;
}

.archives {
  zoom: 1;
  -webkit-column-gap: 10px;
  column-gap: 10px;
  .clearfix();

  @media screen and (min-width: 480px) and (max-width: (@screen-phone - 1px)) {
    -webkit-column-count: 2;
    column-count: 2;
  }

  @media screen and (min-width: @screen-phone) {
    -webkit-column-count: 3;
    column-count: 3;
  }
}

.archive-year-wrap {
  margin-bottom: 1em;
  line-height: 1em;
}

.archive-article {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
  break-inside: avoid-column;
}

.archive-article-inner {
  padding: 10px;
  margin-bottom: 15px;
}

.archive-article-title {
  text-decoration: none;
  font-weight: bold;
  color: #000;
  line-height: 1.6em;

  &:hover {
    color: @color-link-hover;
  }
}

.archive-article-footer {
  margin-top: 1em;
}

.archive-article-date {
  color: @color-gray-text;
  text-decoration: none;
  font-size: 0.85em;
  line-height: 1em;
  margin-bottom: 0.5em;
  display: block;
}